<script>
export default {
  name: 'RightList',
  props: {
    // {name 必需,isSelected 必需,children}
    list: {
      typeof: Array,
      default: () => []
    }
  },
  methods: {
    handSelect(item) {
      if (!item.isSelected) {
        this.$emit('select', item)
      }
    }
  },
}
</script>



<template>
  <ul class="right-list-container">
    <li v-for="(item, i) in list" :key="i">
      <span :class="{ active: item.isSelected }" @click="handSelect(item)">{{ item.name }}</span>
      <span v-if="item.aside" :class="{ active: item.isSelected }" @click="handSelect(item)" class="aside">
        {{ item.aside }}
      </span>
      <RightList :list="item.children" @select="handSelect"></RightList>
    </li>
  </ul>
</template>



<style lang='less' scoped>
@import '~@/styles/var.less';

ul {
  margin-left: 1em;

  span {
    display: inline-block;
    min-height: 30px;
    cursor: pointer;

    &.active {
      color: @warn;
      cursor: auto;
    }
  }

  .aside {
    margin-left: 1em;
  }
}
</style>